<template>
  <div
    style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center"
  >
    <el-button
      :type="props.type"
      :size="props.size"
      :plain="props.plain"
      :round="props.round"
      :circle="props.circle"
      :loading="props.loading"
      :disabled="props.disabled"
      :icon="props.icon"
      :color="props.color"
      :dark="props.dark"
      @click="handleClick"
    >
      {{ props.text }}
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { ElButton } from 'element-plus';

const props = defineProps({
  text: {
    type: String,
    default: '按钮'
  },
  type: {
    type: String as () => '' | 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger',
    default: 'primary'
  },
  size: {
    type: String as () => 'large' | 'default' | 'small',
    default: 'default'
  },
  plain: {
    type: Boolean,
    default: false
  },
  round: {
    type: Boolean,
    default: false
  },
  circle: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  icon: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: ''
  },
  dark: {
    type: Boolean,
    default: false
  }
});

const handleClick = (event: MouseEvent) => {
  console.log('Button clicked:', event);
};
</script>
